﻿
@{
    ViewBag.Title = "文章管理 - " + ViewBag.DomainTitle;
    Layout = "~/Views/Shared/_Layout.cshtml";

    List<QunProject.Model.classify> classifyList = (List<QunProject.Model.classify>)ViewBag.Classify;
}

<form class="layui-form query-form ptop15" id="queryToolBar">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">知识分类</label>
            <div class="layui-input-inline">
                <select name="qClassify">
                    <option value="">全部</option>
                    @foreach (var classify in classifyList)
                    {
                        <option value="@classify.ID">@classify.Name</option>
                    }
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">文章类型</label>
            <div class="layui-input-inline">
                <select name="qType">
                    <option value="">全部</option>
                    @foreach (var item in Enum.GetValues(typeof(QunProject.Model.EnumHelper.ArticleType)))
                    {
                        <option value="@((int)item)">@item.ToString()</option>
                    }
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">文章ID</label>
            <div class="layui-input-inline">
                <input type="text" name="qArticleId" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户筛选</label>
            <div class="layui-input-inline">
                <input type="text" name="qMember" class="layui-input" placeholder="手机号码/名称/用户编号">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="qTitle" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">专题ID</label>
            <div class="layui-input-inline">
                <input type="text" name="qSpecial" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <span class="layui-btn layui-btn-sm" onclick="javascript: { tableReload();}">查询</span>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置查询条件</button>
            <a class="layui-btn layui-btn-warm layui-btn-sm" href="/Article/EditBanner">新增幻灯片</a>
            <a class="layui-btn layui-btn-warm layui-btn-sm" href="/Article/EditFriend">新增友情链接</a>
            <a class="layui-btn layui-btn-warm layui-btn-sm" href="/Article/EditProclaim">新增公告</a>
        </div>
    </div>
</form>

<table class="layui-table" lay-filter="dataTable" lay-data="{id:'dataTable',height:'full-152',method:'post',cellMinWidth:120,page:true,limit:20,url:'/Article/AjaxData'}">
    <thead>
        <tr>
            <th lay-data="{field:'ID', fixed: 'left', width: 60}">ID</th>
            <th lay-data="{field:'CreateTime',width:170}">创建时间</th>
            <th lay-data="{field:'TypeName',width:90}">文章类型</th>
            <th lay-data="{field:'ClassifyID',templet: '#tmpClassify'}">知识分类</th>
            <th lay-data="{field:'Sort',width:60}">排序</th>
            <th lay-data="{field:'Phone',width:120}">手机号码</th>
            <th lay-data="{field:'Number',width:100}">编号</th>
            <th lay-data="{field:'UserName'}">用户名称</th>
            <th lay-data="{field:'Title',width:150}">标题</th>
            <th lay-data="{field:'Img',width:60,templet:'#tmpImg'}">封面</th>
            <th lay-data="{field:'Audit',width:100,templet: '#tmpAudit'}">审核状态</th>
            <th lay-data="{field:'Source',width:100,templet: '#tmpSource'}">来源</th>
            <th lay-data="{field:'SpecialID',templet: '#tmpSpecial'}">专题</th>
            <th lay-data="{field:'ClickAmount',width:150,templet: '#tmpClickAmount'}">信息</th>
            <th lay-data="{field:'Password',width:60}">密码</th>
            <th lay-data="{field:'Remark',width:150}">备注 E</th>
            <th lay-data="{fixed: 'right',align:'center',width:120,field:'Tops',templet: '#tmpStates'}">状态</th>
            <th lay-data="{fixed: 'right',width:170, align:'center', toolbar: '#tmpToolBar'}">操作</th>
        </tr>
    </thead>
</table>

<script type="text/html" id="tmpImg">
    {{# if(d.Img) { }}
        {{# if(d.Types == '@((int)QunProject.Model.EnumHelper.ArticleType.幻灯片)'){ }}
        <div id="col_img_{{ d.ID }}" onclick="javascript: { previewImg('col_img_{{ d.ID }}'); }">
            <img src="{{ d.Img }}" alt="图" />
        </div>
        {{# }else{ }}
        <div id="col_img_{{ d.ID }}" onclick="javascript: { previewImg('col_img_{{ d.ID }}'); }">
            <img src="{{ fileApiUrl + d.Img }}" alt="图" />
        </div>
        {{# } }}
    {{# }else{ }}
    <span>无</span>
    {{# } }}
</script>

<script type="text/html" id="tmpAudit">
    {{#
        var _auditTxt = '';
        switch(d.Audit) {
            case 1:
                _auditTxt = '<span style="color:blue;">待审核</span>';
            break;
            case 2:
                _auditTxt = '<span style="color:green;">已审核</span>';
            break;
            case 3:
                _auditTxt = '<span style="color:red;">未通过（' + d.AuditReason + '）</span>';
            break;
            case 4:
                _auditTxt = '<span style="color:rgb(242, 0, 255);">草稿</span>';
            break;
            default:
                _auditTxt = '<span style="color:rgb(207, 207, 207);">错误</span>';
            break;
        }
    }}
    {{ _auditTxt }}
</script>

<script type="text/html" id="tmpSource">
    {{#
    var _sourceTxt = d.Source ? '<a href="' + d.SourceUrl + '" target="_blank">' + d.Source + '</a>' : '-';
    }}
    {{ _sourceTxt }}
</script>

<script type="text/html" id="tmpClickAmount">
    <i class="layui-icon layui-icon-read" title="浏览量"></i> {{= d.ClickAmount.toString() }}
    <i class="layui-icon layui-icon-praise" title="赞"></i> {{= d.Praise.toString() }}
    <i class="layui-icon layui-icon-tread" title="踩"></i> {{= d.Criticism.toString() }}
</script>

<script type="text/html" id="tmpStates">
    {{#
        var _statesTxt = '';
        if(d.Tops){
            _statesTxt += '<i class="layui-icon" style="color:red" title="已置顶" onclick="javascript:{ editTop(' + d.ID + '); }">&#xe609;</i> &nbsp;&nbsp;'
        }else{
            _statesTxt += '<i class="layui-icon" title="未置顶" onclick="javascript:{ editTop(' + d.ID + '); }">&#xe609;</i> &nbsp;&nbsp;'
        }
        if(!d.IsReply){
            _statesTxt += '<i class="layui-icon" style="color:red" title="只读">&#xe6b2;</i> &nbsp;'
        }else{
            _statesTxt += '<i class="layui-icon" title="可回复">&#xe6b2;</i> &nbsp;'
        }
        if(d.Password){
            _statesTxt += '<i class="layui-icon" style="color:red" title="已加密" onclick="javascript:{ editReload(' + d.ID + '); }">&#xe673;</i> &nbsp;'
        }else{
            _statesTxt += '<i class="layui-icon" title="未加密">&#xe673;</i> &nbsp;'
        }
    }}
    {{ _statesTxt }}
</script>

<script type="text/html" id="tmpClassify">
    {{#
    var _classifyTxt = d.ClassifyID ? d.ClassifyName + '(' + d.ClassifyID + ')' : '-';
    }}
    {{ _classifyTxt }}
</script>

<script type="text/html" id="tmpSpecial">
    {{#
    var _specialTxt = d.SpecialID ? d.SpecialName + '(' + d.SpecialID + ')' : '-';
    }}
    {{ _specialTxt }}
</script>

<script type="text/html" id="tmpToolBar">
    {{# if(d.Types == '@((int)QunProject.Model.EnumHelper.ArticleType.普通文章)') { }}
    <a class="layui-btn layui-btn-xs" lay-event="info">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" href="/Article/Preview/{{= d.ID }}" target="_blank">预览</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="audit">审核</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" href="/Article/{{= d.Types == '@((int)QunProject.Model.EnumHelper.ArticleType.幻灯片)' ? 'EditBanner' : d.Types == '@((int)QunProject.Model.EnumHelper.ArticleType.友情链接)' ? 'EditFriend' : 'EditProclaim' }}/{{= d.ID }}">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="audit">审核</a>
    {{# } }}
</script>

<script type="text/html" id="tmpIsAdmin">
    <input type="checkbox" name="IsAdmin" value="{{d.ID}}" lay-skin="switch" lay-text="T|F" lay-filter="IsAdmin" {{ d.IsAdmin ? 'checked' : '' }}>
</script>

<div id="articleInfo">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this" id="tabIndex">状态信息</li>
            <li id="tabFile" onclick="javascript: { loadResource(); }">附件</li>
            <li id="tabReply" onclick="javascript: { loadReply(); }">回复</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form query-form" id="infoDataForm">
                    <input type="text" id="ID" name="ID" value="" class="layui-hide" />
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Title" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">封面</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Img" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">审核状态</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Audit" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">审核原因</label>
                            <div class="layui-input-inline">
                                <input type="text" name="AuditReason" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">来源</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Source" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">来源地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="SourceUrl" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">赞</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Praise" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">踩</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Criticism" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">点击量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="ClickAmount" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">文章类型</label>
                            <div class="layui-input-inline">
                                <input type="text" name="TypeName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">内容</label>
                            <div class="layui-input-inline query-text">
                                <textarea name="Content" cols="15" class="layui-textarea" readonly></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <span class="layui-btn layui-btn-warm layui-btn-sm" onclick="javascript: { ejectInfo.close(); }">关闭</span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table" id="fileTable" lay-filter="fileTable"></table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table" id="replyTable" lay-filter="replyTable"></table>
            </div>
        </div>
    </div>
</div>

<div id="auditInfo">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">状态信息</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form query-form" id="auditForm">
                    <input type="text" id="ID" name="ID" value="" class="layui-hide" />
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">审核状态</label>
                            <div class="layui-input-inline">
                                <select name="Audit">
                                    @foreach (var item in Enum.GetValues(typeof(QunProject.Model.EnumHelper.AuditType)))
                                    {
                                        <option value="@((int)item)">@item.ToString()</option>
                                    }
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">原因</label>
                            <div class="layui-input-inline">
                                <textarea name="AuditReason" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <span class="layui-btn layui-btn-sm" onclick="javascript: { submitData(); }">保存</span>
                            <span class="layui-btn layui-btn-warm layui-btn-sm" onclick="javascript: { ejectAudit.close(); }">关闭</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tmpReplyToolBar">
    {{# if(d.IsDisplay) { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="audit" onclick="javascript: { reply.displaySubmit({{= d.ID }}); }">隐藏</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="audit" onclick="javascript: { reply.displaySubmit({{= d.ID }}); }">显示</a>
    {{# } }}
</script>

<script type="text/html" id="tmpDisplay">
    {{#
        var _statesTxt = '';
        if(d.IsDisplay){
            _statesTxt += '<i class="layui-icon" style="color:green" title="显示">&#xe605;</i>'
        }else{
            _statesTxt += '<i class="layui-icon" style="color:red" title="隐藏" >&#x1006;</i> &nbsp;&nbsp;'
        }
    }}
    {{ _statesTxt }}
</script>

@Html.Partial("~/Views/Shared/_Script.cshtml")

<script>
    var selectedArticleID, table = layui.table, form = layui.form;
    var resource = new Resource(), reply = new Reply();
    var ejectInfo = new Eject(), ejectAudit = new Eject();
    ejectInfo.init({
        elm: '#articleInfo',
        width: '700px',
        obj:'ejectInfo'
    });
    ejectAudit.init({
        elm: '#auditInfo',
        width: '400px',
        obj:'ejectAudit'
    });
    // 监听工具条
    table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        if (layEvent === 'info') {//状态设置
            $.post('/Article/AjaxEntity', { id: data.ID }, function (result) {
                $('#infoDataForm').setForm(result.data);
                selectedArticleID = result.data.ID;
                $('#tabIndex').click();
                resource.option.tableIns = null;
                reply.option.tableIns = null;
                form.render();
                ejectInfo.open();
            });
        }
        if (layEvent === 'audit') {//重置密码
            $('#auditForm').setForm(data);
            form.render();
            ejectAudit.open();
        }
    });
    // 刷新table
    function tableReload() {
        var paras = $('#queryToolBar').getForm();
        table.reload('dataTable', {
            where: paras
            , page: { curr: 1 }
        });
    };
    // 提交修改
    function editModel(data) {
        $.post('/Article/AjaxEdit', data, function (result) {
            layer.msg(result.msg);
        });
    };
    // 置顶
    function editTop(id) {
        layer.confirm('确定改变置顶状态吗？', function (index) {
            layer.close(index);
            $.post('/Article/AjaxTop', { id: id }, function (result) {
                layer.msg(result.msg);
                tableReload();
            });
        });
    };
    // 重置密码
    function editReload(id) {
        layer.confirm('确定重置密码吗？<br>@ViewBag.UserDefaultPassword', function (index) {
            layer.close(index);
            $.post('/Article/AjaxReload', { id: id }, function (result) {
                layer.msg(result.msg);
                tableReload();
            });
        });
    };
    // 保存审核状态
    function submitData() {
        var data = $('#auditForm').getForm();
        if (data.Audit == '@((int)QunProject.Model.EnumHelper.AuditType.审核不通过)') {
            if (!data.AuditReason) {
                layer.msg('请填写原因');
                return;
            }
        } else {
            data.AuditReason = '';
        }
        $.post('/Article/AjaxAudit', data, function (result) {
            layer.msg(result.msg);
            tableReload();
            ejectAudit.close();
        });
    };
    // 加载附件
    function loadResource() {
        resource.paras.articleId = selectedArticleID;
        if (!resource.option.tableIns) {
            resource.fillData();
        }
    };
    // 加载回复
    function loadReply() {
        reply.paras.articleId = selectedArticleID;
        if (!reply.option.tableIns) {
            reply.fillData();
        }
    };

    // 文章附件
    function Resource() {
        this.paras = {
            articleId: null
        };
        this.option = {
            tableIns: null,
            tableOptions: {
                elem: '#fileTable'
                , url: '/Resource/AjaxData'
                , height: 'full-110' //容器高度
                , page: true
                , limit: 20
                , where: null
                , method: 'post'
                , cols: [[ { field: 'Name', width: 100, title: '名称' }
                    , { field: 'Source', width: 100, title: '来源' }
                    , { field: 'Url', width: 100, title: '地址' }
                    , { field: 'Password', width: 100, title: '密码' }
                    , { field: 'Remark',width:150, title: '备注' }
                ]]
            }
        };
        this.fillData = function () {
            this.option.tableOptions.where = this.paras;
            this.option.tableIns = table.render(this.option.tableOptions);
        };
        this.tableReload = function () {
            var _obj = this;
            table.reload('fileTable', {
                where: _obj.paras
                , page: { curr: 1 }
            });
        };
    };
    // 文章回复
    function Reply() {
        this.paras = {
            articleId: null
        };
        this.option = {
            tableIns: null,
            tableOptions: {
                elem: '#replyTable'
                , url: '/Reply/AjaxData'
                , height: 'full-110' //容器高度
                , page: true
                , limit: 20
                , where: null
                , method: 'post'
                , cols: [[{ field: 'CreateTime', width: 170, title: '回复时间' }
                    , { field: 'ParentID', width: 60, title: 'PID' }
                    , { field: 'IsDisplay', width: 60, title: '显示', templet: '#tmpDisplay' }
                    , { field: 'Praise', width: 60, title: '赞' }
                    , { field: 'Criticism', width: 60, title: '踩' }
                    , { field: 'Content', width: 150, title: '内容' }
                    , { field: 'Remark', width: 150, title: '备注' }
                    , { fixed: 'right', width: 80, title: '操作', align: 'center', toolbar: '#tmpReplyToolBar' }
                ]]
            }
        };
        this.fillData = function () {
            this.option.tableOptions.where = this.paras;
            this.option.tableIns = table.render(this.option.tableOptions);
        };
        this.tableReload = function () {
            var _obj = this;
            table.reload('replyTable', {
                where: _obj.paras
                , page: { curr: 1 }
            });
        };
        this.displaySubmit = function (id) {
            var _obj = this;
            layer.confirm('确定改变隐藏状态吗？', function (index) {
                layer.close(index);
                $.post('/Reply/AjaxDisplay', { ids: id }, function (result) {
                    layer.msg(result.msg);
                    _obj.tableReload();
                });
            });
        };
    };

    // 图片预览
    function previewImg(divId) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['80%', '80%'],
            skin: 'layui-layer', //没有背景色
            shadeClose: true,
            content: $('#' + divId).html()
        });
    };
</script>